<template>
  <div class="viewport">
    <div class="column">
      <!--概览-->
      <div class="overview2 panel">
        <div class="inner">
          <div>
            <h3>设备总数：{{ bigBoardB.point }}</h3>
          </div>
          <div class="items">
            <div class="item" v-for="item in pointData">
              <span> {{ item?.name }} </span>
              {{ item?.value ? item?.value : 0 }}
            </div>
          </div>
          <div class="echartsPie" ref="overviewChartRef"></div>
        </div>
      </div>
      <!--事件-->
      <div class="point2 panel">
        <div class="inner">
          <div class="caption">
            <h3>设备事件信息</h3>
          </div>
          <div class="chart">
            <div class="pie" ref="ponintChartRef"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="column">
      <!-- 地图 -->
      <div class="map2">
        <div class="chart">
          <baidu-map
            ref="mapRef"
            :mapStyle="mapStyle"
            class="map"
            v="3.0"
            type="API"
            :center="{ lng: 119.71, lat: 31.6 }"
            :zoom="9"
            :scroll-wheel-zoom="true"
          >
            <bml-marker-clusterer :averageCenter="true" :styles="styles">
              <bm-marker
                v-for="marker of markers"
                :key="marker"
                :position="{ lng: marker.lng, lat: marker.lat }"
                :dragging="false"
                @click="infoWindowOpen($event, marker)"
              >
                <bm-label
                  v-if="marker.lng === hover"
                  :content="marker.name"
                  :position="{ lng: marker.lng, lat: marker.lat }"
                  :labelStyle="{
                    color: 'black',
                    fontSize: '18px',
                    opacity: '0.5',
                    border: '1px solid white',
                  }"
                  title="Hover me"
                />
              </bm-marker>
            </bml-marker-clusterer>
            <!-- 行政区域划分 -->
            <bm-boundary
              v-for="(item, idx) in deviceMap"
              :key="item.adcode"
              :name="item.name"
              :strokeWeight="1"
              strokeColor="#b8dbd9"
              :fillOpacity="0.2"
              fillColor="#b8dbd9"
              @click="mapBoundary(item)"
            >
            </bm-boundary>
          </baidu-map>
        </div>
      </div>
      <!--监控-->
      <div class="monitor2 panel">
        <div class="inner">
          <div class="content" style="display: block">
            <div class="head">
              <span class="col">设备编号</span>
              <span class="col">告警原因</span>
              <span class="col">告警时间</span>
            </div>
            <div class="device-table-content">
              <el-table
                class="alarm-table"
                :data="tableData"
                style="width: 100%; height: 306px"
              >
                <el-table-column
                  v-for="item in tableHead"
                  :prop="item.prop"
                  :key="item.prop"
                  align="center"
                />
              </el-table>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="column">
      <!-- 排放量趋势图 -->
      <div class="sales2 panel">
        <div class="inner">
          <div class="caption">
            <h3>排放量趋势</h3>
          </div>
          <div class="chart">
            <div class="line" ref="dischargeChartRef"></div>
          </div>
        </div>
      </div>
      <!-- 设备告警类型 -->
      <div class="top2 panel">
        <div class="inner">
          <div class="caption">
            <h3>设备告警分类</h3>
          </div>
          <div class="chart">
            <div class="content" ref="businessChartRef"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { deviceMap, mapJson } from "../../../../virtual"; //最新常州市地图json
import { useConfig } from "@/store/config";
import { BEFORE_RESIZE_LAYOUT } from "@/store/constant/cacheKey"; //获取上一次切换的布局
import { onBeforeRouteUpdate, useRoute, useRouter } from "vue-router";
import { BaiduMap, BmlMarkerClusterer } from "vue-baidu-map-3x"; //baidu-map组件red
import {
  ref,
  toRaw,
  onBeforeUnmount,
  reactive,
  nextTick,
  onActivated,
  onMounted,
  onBeforeMount,
  watch,
} from "vue";
import "element-plus/theme-chalk/display.css";
import { useUserInfo } from "@/store/userInfo";
import { useNavTabs } from "@/store/navTabs";
import { Session } from "@/utils/storage";
import { useBigBoardB } from "@/store/backend/BigBoard/bigBoard2";
import { useRegion } from "@/store/backend/SysM/region";
import _ from "lodash";
// 引入echarts 按需引入
import * as echarts from "echarts/core";
import {
  DatasetComponent,
  DatasetComponentOption,
  TitleComponent,
  TitleComponentOption,
  TooltipComponent,
  TooltipComponentOption,
  ToolboxComponent,
  ToolboxComponentOption,
  GridComponent,
  GridComponentOption,
  LegendComponent,
  LegendComponentOption,
  TransformComponent,
  VisualMapComponent,
  VisualMapComponentOption,
  GeoComponent,
  GeoComponentOption,
} from "echarts/components";
import {
  MapChart,
  MapSeriesOption,
  BarChart,
  BarSeriesOption,
  LineChart,
  LineSeriesOption,
  PieChart,
  PieSeriesOption,
  GaugeChart,
  GaugeSeriesOption,
} from "echarts/charts";
import { LabelLayout, UniversalTransition } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";
echarts.use([
  DatasetComponent,
  LineChart,
  LegendComponent,
  BarChart,
  LabelLayout,
  TitleComponent,
  TooltipComponent,
  GridComponent,
  TransformComponent,
  CanvasRenderer,
  UniversalTransition,
  VisualMapComponent,
  GeoComponent,
  MapChart,
  ToolboxComponent,
  PieChart,
  GaugeChart,
]);
type EChartsOption = echarts.ComposeOption<
  | TooltipComponentOption
  | GridComponentOption
  | LegendComponentOption
  | BarSeriesOption
  | TitleComponentOption
  | LineSeriesOption
  | DatasetComponentOption
  | VisualMapComponentOption
  | GeoComponentOption
  | MapSeriesOption
  | ToolboxComponentOption
  | PieSeriesOption
  | GaugeSeriesOption
>;

const navTabs = useNavTabs();
const config = useConfig();
const route = useRoute();
const router = useRouter();
const bigBoardB = useBigBoardB();
const region = useRegion();

let tableNode = ref();
const pointData = reactive<any>([]);
const eventData = reactive<any>([]);
let scrollHeight = ref<number>(0);
let currentScrollTop = ref<number>(0);
let maxScrollTop = ref<number>(0);
let timeInter = ref(); //每次滑动的定时器
let timeInter2 = ref();
let timeInter3 = ref();
const markers = ref<Ponit[]>([]); //大屏2坐标点位

var timer: NodeJS.Timer;

//地图样式
const mapStyle = ref({
  styleJson: mapJson,
});
const hover = ref();
type Ponit = {
  lng: number;
  lat: number;
  name: string;
};
const styles = ref([]);

const tableHead = [
  {
    prop: "code",
    label: "设备编号",
  },
  {
    prop: "report_name",
    label: "告警信息",
  },
  {
    prop: "report_time",
    label: "告警时间",
  },
];

const state: { charts: any[] } = { charts: [] }; //存放echarts图表数据
const state2: { charts: any[] } = { charts: [] }; //存放echarts图表数据
type Carbon = {
  equipid: number;
  name: string;
  avatar: string;
  owner_auth: number;
  user_auth: number;
  remark: string;
  is_online: number;
  is_alarm: number;
  is_running: number;
  status: string;
  last_parser_time: number;
  wind_speed: string;
  temperature: string;
  pa: string;
  carbonUseTime: string;
  carbonUse: string;
  dev_name: string;
  current_value_sensorid: number;
  current_value_updatetime: number;
  lastChange: string;
  changeTimes: string;
  representative: string;
  telephone: string;
  tags: [];
};
const tableData = ref<any[]>([]);
const carBonTableData = reactive<Carbon[]>([]);
// const mapRef = ref<HTMLElement>();
const overviewChartRef = ref<HTMLElement>();
const ponintChartRef = ref<HTMLElement>();
const userChartRef = ref<HTMLElement>();
const dischargeChartRef = ref<HTMLElement>();
const businessChartRef = ref<HTMLElement>(); //修改为设备告警类型
//无数据占位
const optionNull = reactive<any>({
  title: {
    text: "暂无数据",
    x: "center",
    y: "center",
    textStyle: {
      color: "#fff",
      fontWeight: "normal",
      fontSize: 16,
    },
  },
});
let stop = ref<boolean>(false);
//设备数量预览分布饼图
const initOverviewPie = () => {
  const overviewPieChart = echarts.init(overviewChartRef.value as HTMLElement);
  const option = {
    tooltip: {
      trigger: "item",
    },
    legend: {
      top: "5%",
      left: "center",
      textStyle: {
        //图例文字的样式
        color: "#fff",
        fontSize: 16,
      },
      lineStyle: {
        color: "#fff",
      },
    },
    series: [
      {
        type: "pie",
        radius: ["25%", "50%"],
        avoidLabelOverlap: false,
        labelLine: {
          lineStyle: {
            color: "rgba(255, 255, 255, 0.3)",
          },
          smooth: 0.2,
          length: 6,
          length2: 10,
        },
        itemStyle: {
          borderColor: "#fff",
          borderWidth: 1,
        },
        emphasis: {
          label: {
            show: true,
            fontSize: "20",
            fontWeight: "bold",
          },
        },
        data: pointData,
      },
    ],
  };
  overviewPieChart.setOption(pointData.length === 0 ? optionNull : option);
  state.charts.push(overviewPieChart);
};
//设备故障信息饼图
const initPie = () => {
  const pointPieChart = echarts.init(ponintChartRef.value as HTMLElement);
  const option = {
    tooltip: {
      trigger: "item",
    },
    legend: {
      show: false,
    },
    series: [
      {
        type: "pie",
        radius: ["25%", "50%"],
        avoidLabelOverlap: false,
        label: {
          show: true,
          formatter: `{b}({d}%)`,
        },
        labelLine: {
          lineStyle: {
            color: "rgba(255, 255, 255, 0.3)",
          },
          smooth: 0.2,
          length: 10,
          length2: 20,
        },
        itemStyle: {
          borderColor: "#fff",
          borderWidth: 1,
        },
        emphasis: {
          label: {
            show: true,
            fontSize: "40",
            fontWeight: "bold",
          },
        },
        data: eventData,
      },
    ],
  };
  pointPieChart.setOption(eventData.length === 0 ? optionNull : option);
  state.charts.push(pointPieChart);
};
//设备告警类型柱形图
const initBusinessGague = () => {
  const businessChart = echarts.init(businessChartRef.value as HTMLElement);
  const option = {
    dataset: [
      {
        dimensions: ["type", "times"],
        source: bigBoardB.warnData,
      },
      {
        transform: {
          type: "sort",
          config: { dimension: "times", order: "desc" },
        },
      },
    ],
    xAxis: {
      type: "category",
      axisLabel: {
        interval: 0,
        rotate: 30,
        color: "#fff",
      },
    },
    yAxis: {
      axisLabel: {
        color: "#fff",
      },
    },
    series: {
      type: "bar",
      encode: { x: "name", y: "score" },
      datasetIndex: 1,
      backgroundStyle: {
        color: "rgba(111, 162, 135, 0.2)",
      },
      itemStyle: {
        //这里是颜色
        color: function (params: any) {
          //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
          var colorList = [
            "#00A3E0",
            "#FFA100",
            "#ffc0cb",
            "#CCCCCC",
            "#BBFFAA",
            "#749f83",
            "#ca8622",
            "#65B581",
            "#FFCE34",
            "#FD665F",
          ];
          return colorList[params.dataIndex];
        },
      },
    },
  };

  option &&
    businessChart.setOption(
      bigBoardB.warnData.length === 0 ? optionNull : option
    );
  state.charts.push(businessChart);
};

interface anyObj {
  [key: string]: any;
}
const carbonItem: { config: anyObj } = reactive({ config: {} });
//设备排放量趋势图使用情况 活性炭
const carbonSatrt = () => {
  const dischargeChart = echarts.init(dischargeChartRef.value as HTMLElement);
  const option = {
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: bigBoardB.runTimeKeyArr,
      textStyle: {
        //图例文字的样式
        color: "#fff",
        fontSize: 16,
      },
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    toolbox: {
      feature: {
        saveAsImage: {},
      },
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月",
      ],
      axisLabel: {
        color: "#fff",
      },
    },
    yAxis: {
      type: "value",
      axisLabel: {
        color: "#fff",
      },
    },
    series: bigBoardB.runTimeData,
  };
  dischargeChart.setOption(
    bigBoardB.runTimeData.length === 0 ? optionNull : option
  );
  state.charts.push(dischargeChart);
};

//无限滚动
const updateList = () => {
  //数据大于3才会进行滑动
  if (tableData && tableData.value.length > 3) {
    // 获取滑动区域DOM
    tableNode.value = document
      .querySelector(".alarm-table")
      ?.querySelector(".el-scrollbar__wrap") as HTMLElement;
    // 设置每次滑动几行
    scrollHeight.value =
      tableNode.value.querySelectorAll("tr")[0].offsetHeight *
      (tableData.value.length > 8 ? 4 : 2);

    // 设置每次滑动的PX和滑动区域的高度
    tableNode.value.style.height = `${scrollHeight.value}px`;
    // 获取最大滑动空间
    maxScrollTop.value =
      (tableNode.value.firstElementChild as HTMLElement).offsetHeight -
      scrollHeight.value;
    //开始
    restTimeInter();
  }
};
function restTimeInter() {
  // 清除所有定时器
  clearAllInterval();
  // 设置定时器 每1秒执行一次
  timeInter.value = setInterval(setMultiLine, 3000);
}

//清除定时器
const clearAllInterval = () => {
  clearInterval(timeInter.value);
  clearInterval(timeInter2.value);
  clearInterval(timeInter3.value);
};

//滑动开始
const setMultiLine = () => {
  //下一次应该滑动到的位置
  currentScrollTop.value =
    (tableNode.value.scrollTop || 0) +
    scrollHeight.value +
    (currentScrollTop.value % scrollHeight.value);
  if (tableNode.value.scrollTop >= maxScrollTop.value) {
    //滑完了 重置
    currentScrollTop.value = 0;
    tableNode.value.scrollTop = 0;
    restTimeInter();
  } else {
    //清除上一个定时器
    clearInterval(timeInter2.value);
    //开始滑
    timeInter2.value = setInterval(setScrollTop, 5);
  }
};

//设置位置
const setScrollTop = () => {
  tableNode.value.scrollTop++; //table开始一点点滑动
  if (tableNode.value.scrollTop >= currentScrollTop.value) {
    clearInterval(timeInter2.value);
  }
  if (tableNode.value.scrollTop >= maxScrollTop.value) {
    //滑到底了 甚至超过了 就直接到最大滑动距离
    tableNode.value.scrollTop = maxScrollTop.value;
    clearInterval(timeInter2.value);
  }
};

//点坐标点击
const infoWindowOpen = (e: any, marker: any) => {
  console.log(e, marker);
  hover.value = marker.lng;
};
//监听窗口大下自适应的方法
const echartsResize = () => {
  // if (state2.charts.length > 0) {
  //   state2.charts[0].resize();
  // }
  // nextTick(() => {
  //   for (const key in state.charts) {
  //     state.charts[key].resize();
  //   }
  // });
};
//释放state中图表并删除
const dShift = () => {
  return new Promise((resolve, reject) => {
    for (const key in state.charts) {
      state.charts[key].dispose();
    }
    resolve("");
  });
};
// 地图行政区域点击
const mapBoundary = (item: anyObj) => {
  console.log("item行政区域", item);
  switch (item.name) {
    case "钟楼区":
      //region: 6,
      func(6);
      break;
    case "天宁区":
      //   region: 4,
      func(4);
      break;
    case "武进区":
      //   region: 8,
      func(8);
      break;
    case "溧阳市":
      //   region: 25,
      func(25);
      break;
    case "金坛区":
      //   region: 24,
      func(24);
      break;
    default:
      // region: 7,
      func(7);
      break;
  }
};
//点击设备地图根据区域不同查看不同区域数据
const func = (region: number) => {
  dShift().then(() => {
    state.charts.length = 0;
  });
  //设备
  bigBoardB.getAbnormal(region).then((res: any) => {
    tableData.value.length = 0;
    tableData.value = res;
  });
  //设备区域分布数据 默认常州不变
  bigBoardB.getPoints(region).then((res: any) => {
    pointData.length = 0;
    pointData.push(...res);
    initOverviewPie();
  });
  //大屏2设备故障信息 改为事件
  bigBoardB.getDevicesEvent(region).then((res: any) => {
    eventData.length = 0;
    eventData.push(...res);
    initPie();
  });
  //设备排放量=运行时长
  bigBoardB.getEquipmentruntime(region).then((res: any) => {
    carbonSatrt(); //循环展示动态数据
  });
  bigBoardB.getEquipmentWarning(region).then(() => {
    initBusinessGague();
  });
};
onMounted(() => {
  //获取全部设备接入数据
  bigBoardB
    .getAllDevices({ pageSize: 10000, regions: region.regionIds + "" }, true)
    .then((res: any) => {
      markers.value = res;
    });
  //异常设备监控
  bigBoardB.getAbnormal(2).then((res: any) => {
    tableData.value = res;
  });
  //设备分布
  bigBoardB.getPoints(2).then((res: any) => {
    pointData.push(...res);
    initOverviewPie();
  });
  //左下角设备事件
  bigBoardB.getDevicesEvent(2).then((res: any) => {
    eventData.push(...res);
    initPie();
  });
  //设备排放量=运行时长
  bigBoardB.getEquipmentruntime(2).then((res: any) => {
    carbonSatrt(); //循环展示动态数据
  });
  bigBoardB.getEquipmentWarning(2).then(() => {
    initBusinessGague();
  });
  timer = setTimeout(() => {
    updateList();
  }, 1000);
  window.addEventListener("resize", echartsResize);
  window.addEventListener("popstate", changeLayout); // 回退时执行changeLayout方法
});
onBeforeUnmount(() => {
  clearTimeout(timer);
  //清空三个定时器
  clearAllInterval();
  dShift().then(() => {
    state.charts.length = 0;
  });
  if (state2.charts.length > 0) {
    state2.charts[0].dispose();
    state2.charts.shift();
  }
  //清除监听事件
  window.removeEventListener("resize", echartsResize);
});

// 改变布局
const changeLayout = () => {
  let defaultBeforeResizeLayout = {
    layoutMode: config.layout.layoutMode, //后台布局
    menuCollapse: config.layout.menuCollapse, //是否水平折叠收起菜单
  };
  let beforeResizeLayout = Session.get(BEFORE_RESIZE_LAYOUT); // 切换到上次布局方式
  if (!beforeResizeLayout)
    Session.set(BEFORE_RESIZE_LAYOUT, defaultBeforeResizeLayout);
  let beforeResizeLayoutTemp = beforeResizeLayout || defaultBeforeResizeLayout;
  config.setLayout("menuCollapse", beforeResizeLayoutTemp.menuCollapse);
  config.setLayoutMode(beforeResizeLayoutTemp.layoutMode);
  window.removeEventListener("popstate", changeLayout);
};
watch(
  () => _.cloneDeep(bigBoardB.markers),
  (newV, oldV) => {
    if (newV) markers.value = newV; //双重保险保证刷新后设备数据显示
  }
);
</script>
<style lang="scss">
* {
  margin: 0;
  padding: 0;
  font-weight: normal;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
}

.viewport {
  line-height: 1.15;
  font-size: 0.5rem;
  margin: 0;
  padding: 0;
  background-repeat: no-repeat;
  background-position: 0 0 / cover;
  // width: 100vw;
  height: 100vh;
  /* 限定大小 */
  min-width: 1024px;
  max-width: 2078px;
  min-height: 780px;
  margin: 0 auto;
  background: url(../../../assets/boardImage/title.png) no-repeat 0 0 / contain;
  display: flex;
  padding: 3.667rem 0.833rem 0;
}

.column {
  flex: 3;
  position: relative;
}

.column:nth-child(2) {
  flex: 4;
  margin: 1.333rem 0.833rem 0;
}

.panel {
  /* 边框 */
  box-sizing: border-box;
  border: 2px solid red;
  border-image: url(../../../assets/boardImage/border.png) 51 38 21 132;
  border-width: 2.125rem 1.583rem 0.875rem 5.5rem;
  position: relative;
  margin-bottom: 0.833rem;
}

.panel .inner {
  /* 装内容 */
  /* height: 60px; */
  position: absolute;
  top: -2.125rem;
  right: -1.583rem;
  bottom: -0.875rem;
  left: -5.5rem;
  padding: 1rem 1.5rem;
}

.panel h3 {
  font-size: 0.833rem;
  color: #fff;
}

/* 概览区域 */
.overview2 {
  height: 24.583rem;
}

.overview2 .caption {
  display: flex;
  line-height: 1;
}

.overview2 .inner {
  display: flex;
  flex-direction: column;

  .items {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    margin-top: 10px;

    .item {
      color: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border: 1px solid #4c9bfd;
      font-size: 1rem;
      width: 3rem;
      height: 2.5rem;
    }
  }
}

.overview2 .echartsPie {
  height: 20.583rem;
  width: 100%;
}

.overview2 h4 {
  font-size: 1.2rem;
  padding-left: 0.2rem;
  color: #fff;
  margin-bottom: 0.333rem;
}

.overview2 span {
  font-size: 0.667rem;
  color: #4c9bfd;
}

/* 点位 */
.point2 {
  height: 14.8rem;
  display: flex;
  flex-direction: column;
  align-items: center;

  .inner {
    display: flex;
    flex-direction: column;
  }
}

.point2 .chart {
  flex: 1;
  padding-top: 0.6rem;
  position: relative;
}

.point2 .pie {
  // width: 15.8rem;
  width: 100%;
  height: 10rem;
  margin-left: -0.4rem;
}

.point2 .data {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 7rem;
  // padding: 1.5rem 1.25rem;
  box-sizing: border-box;
  background-image: url(../../../assets/boardImage/rect.png);
  background-size: cover;
}

.point2 h4 {
  margin-bottom: 0.5rem;
  font-size: 1.167rem;
  color: #fff;
}

.point2 span {
  display: block;
  color: #4c9bfd;
  font-size: 0.667rem;
}

/* 地图  */
.map2 {
  height: 24.1rem;
  margin-bottom: 0.833rem;
  display: flex;
  flex-direction: column;

  .map {
    width: 100%;
    height: 24.1rem;
  }
}

/* 监控模块 */
.monitor2 {
  height: 14.167rem;
  display: flex;
}

.monitor2 .inner {
  padding: 1rem 0;
  display: flex;
  flex-direction: column;
}

.monitor2 .tabs {
  padding: 0 1.5rem;
  margin-bottom: 0.75rem;
}

.monitor2 .tabs a {
  color: #fff;
  font-size: 0.75rem;
  padding: 0 1.125rem;
}

.monitor2 .content {
  flex: 1;
  display: none;
  position: relative;
}

.monitor2 {
  .inner {
    .device-table-content {
      position: absolute;
      top: 1.6rem;
      bottom: 0;
      width: 100%;
      overflow: hidden;

      .el-table__inner-wrapper::before {
        //去除底部白线
        height: 0px;
      }

      .el-table {
        position: relative;
        background-color: transparent; //背景色设为透明
        // border-radius: 10px; //圆角边框

        th.el-table__cell.is-leaf {
          //设置表头底部边框消失
          border-bottom: none;
        }

        th {
          background-color: transparent; //背景色设为透明
        }

        tr {
          //每一行背景色设为透明
          line-height: 1.05;
          padding: 0.5rem 1.5rem;
          background-color: transparent;

          &:hover {
            //鼠标悬浮变色
            td {
              background-color: #586f7c !important;
            }
          }

          td {
            //每一行的每一列文字为白色，底部边框为绿色，
            // padding-top: 6px; //设置行高（通过padding控制）
            // padding-bottom: 6px;
            color: #fff;
            border-bottom: 1px solid Rgb(128, 255, 255, 0.1);
          }

          td:first-child {
            //第一列的文字颜色为绿色

            color: #b8dbd9;
          }
        }

        th.el-table__cell:first-child.cell {
          //第一个表头缩进30px
          // padding-left: 30px;
        }

        .el-table__cell:first-child .cell {
          //第一列数据缩进30px
          // padding-left: 30px;
        }

        .el-button--text {
          //按钮颜色为绿色
          color: #80ffff;
        }
      }
    }
  }
}

.monitor2 .head {
  background: rgba(255, 255, 255, 0.1);
  font-size: 0.583rem;
  padding: 0.5rem 1.5rem;
  color: #68d8fe;
  display: flex;
  justify-content: space-around;
  line-height: 1.05;
}

/* 订单 */
.order {
  height: 6.167rem;
}

.order .filter {
  display: flex;
}

.order .filter a {
  display: block;
  height: 0.75rem;
  line-height: 1;
  padding: 0 0.75rem;
  color: #1950c4;
  font-size: 0.75rem;
  border-right: 0.083rem solid #00f2f1;
}

.order .filter a:first-child {
  padding-left: 0;
}

.order .filter a:last-child {
  border-right: none;
}

.order .filter a.active {
  color: #fff;
  font-size: 0.833rem;
}

.order .data {
  display: flex;
  margin-top: 0.833rem;
}

.order .item {
  width: 50%;
}

.order h4 {
  font-size: 1.167rem;
  color: #fff;
  margin-bottom: 0.417rem;
}

.order span {
  display: block;
  color: #4c9bfd;
  font-size: 0.667rem;
}

/* 销售区域 */
.sales2 {
  height: 20rem;
}

.sales2 .caption {
  display: flex;
  line-height: 1;
}

.sales2 h3 {
  height: 0.75rem;
}

.sales2 a.active {
  background-color: #4c9bfd;
  color: #fff;
}

.sales2 .inner {
  display: flex;
  flex-direction: column;
}

.sales2 .chart {
  flex: 1;
  padding-top: 0.6rem;
  position: relative;
}

.sales2 .line {
  width: 100%;
  height: 100%;
}

/* 企业类型 */
.top2 {
  height: 19.7rem;
}

.top2 .inner {
  display: flex;
  flex-direction: column;

  .caption {
    display: flex;
    line-height: 1;
  }
}

.top2 .all {
  display: flex;
  flex-direction: column;
  width: 7rem;
  color: #4c9bfd;
  font-size: 0.6rem;
  vertical-align: middle;
}

.top2 .chart {
  flex: 1;
  padding-top: 0.6rem;
  position: relative;
}

.top2 .all ul {
  padding-left: 0.5rem;
  margin-top: 0.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.top2 .all li {
  overflow: hidden;
}

.top2 .all [class^="icon-"] {
  font-size: 1.5rem;
  vertical-align: middle;
  margin-right: 0.5rem;
}

.top2 .content {
  width: 105%;
  height: 100%;
}

.clock {
  position: absolute;
  top: -1.5rem;
  right: 1.667rem;
  font-size: 0.833rem;
  color: #0bace6;
}

.clock i {
  margin-right: 5px;
  font-size: 0.833rem;
}

@media screen and (max-width: 1600px) {
  .top2 span {
    transform: scale(0.9);
  }

  .top2 .province ul.sup li {
    padding: 0.4rem 0.5rem;
  }

  .top2 .province ul.sub li {
    padding: 0.23rem 0.5rem;
  }

  .quarter span {
    transform: scale(0.9);
  }
}
</style>
